<template>
  <view class="info-edit-page">
    <!-- 顶部导航栏（与个人信息页完全一致） -->
    <view class="nav-bar">
    </view>

    <!-- 操作按钮（放在导航栏上方，与个人信息页布局逻辑一致） -->
    <view class="nav-ops">
      <text class="nav-cancel" @click="onCancel">取消</text>
      <text class="nav-confirm" @click="onConfirm">确认</text>
    </view>

    <!-- 头像选择区域 -->
    <view class="avatar-container">
      <view class="avatar-list">
        <view 
          class="avatar-item" 
          v-for="(item, index) in avatarList" 
          :key="index"
        >
          <image 
            class="avatar-img" 
            :src="item" 
            mode="aspectFill"
          ></image>
          <view class="avatar-radio">
            <text class="radio-dot"></text>
          </view>
        </view>
        <!-- 上传照片项 -->
        <view class="upload-item">
          <image class="upload-icon" src="/static/upload.png"></image>
          <text class="upload-text">上传照片</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatarList: [
        "/static/avatar1.png",
        "/static/avatar2.png",
        "/static/avatar3.png",
        "/static/avatar4.png"
      ]
    };
  },
  methods: {
    onCancel() {
      uni.navigateBack({ delta: 1 });
    },
    onConfirm() {
      uni.showToast({ title: '选择成功', icon: 'none' });
    }
  }
};
</script>

<style scoped>
/* 页面基础容器（与个人信息页完全一致） */
.info-edit-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative; /* 为绝对定位元素提供参考 */
}

/* 顶部导航栏（与个人信息页完全一致） */
.nav-bar {
  position: absolute;
  background-color: #3184fd; /* 相同蓝色背景 */
  height: 300rpx; /* 相同高度 */
  width: 100%;
  z-index: 2; /* 相同层级 */
  /* 完全保留个人信息页导航栏的定位和尺寸 */
}

/* 导航操作按钮（新增，放置在导航栏上方） */
.nav-ops {
  position: absolute;
  top: 40rpx; /* 调整到导航栏可视区域内 */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  box-sizing: border-box;
  z-index: 3; /* 确保在导航栏上方 */
  top: -5px;
}

.nav-cancel, .nav-confirm {
  color: #fff; /* 白色文字与导航栏对比 */
  font-size: 32rpx;
}

/* 头像容器（与个人信息页info-card布局逻辑一致） */
.avatar-container {
  position: absolute;
  width: 90%;
  height: auto;
  background-color: white;
  border-radius: 20rpx;
  margin: 100rpx 5% 0 5%; /* 与个人信息页卡片相同的margin */
  z-index: 3; /* 相同层级 */
  display: block;
  padding: 30rpx;
  box-sizing: border-box;
  top: -50rpx; /* 调整位置避免被导航栏遮挡 */
}

/* 头像列表样式 */
.avatar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* 单个头像项样式 */
.avatar-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.avatar-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx; /* 圆形头像与个人信息页一致 */
  margin-right: 20rpx;
}

/* 头像选择框样式 */
.avatar-radio {
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #3184fd; /* 蓝色边框与主题一致 */
  border-radius: 15rpx;
  margin-top: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radio-dot {
  width: 18rpx;
  height: 18rpx;
  border-radius: 9rpx;
  background-color: #3184fd; /* 蓝色选中状态 */
}

/* 上传项样式 */
.upload-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  border-radius: 15rpx;
  padding: 10px;
  margin-bottom: 15px;
}

.upload-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 5px;
}

.upload-text {
  font-size: 28rpx;
  color: #999;
}
</style>